:root {
    --background-color: #2c3e50;
    --color1: #34495e;
    --color2: #7591AD;
    --color3: #EC3E27;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    position: relative;
    width: 200px;
    height: 300px;
    /* 视距，越大动画变形越小，具体原理在相关文档中有介绍
    这里固定方式，而不是教程中，使用transform: perspective(1000px)
    因为整个动画中并没有发生改变，直接固定方式即可 */
    perspective: 4000px;
    /* 这里也没有Y轴旋转呈现风车立体效果，而是定义在了风车div中 */
}

.box::after {
    /* 这里实现了风车的阴影 */
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    bottom: -200px;
    left: 50%;
    filter: blur(50px);
    opacity: .8;
    border-radius: 100%;
    background-color: #000;
    /* 定位，以及旋转实现扁平 */
    transform: translate(-50%) rotateX(-45deg);
}

.box div {
    position: absolute;
    width: 100%;
    height: 100%;
    /* 沿Y轴旋转-45度实现立体效果 */
    transform: rotateY(-45deg);
    transform-style: preserve-3d;
    animation: rotate 5s linear infinite;
}

.box span {
    /* 扇叶 */
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #c6f3c5;
    /* 渐变中间灰色，两边浅一些 */
    background-image: linear-gradient(0deg, #f1f1f1, #bbb, #f1f1f1);
    border-radius: 20px;
}

/* 分别旋转不同角度实现扇叶效果 */
/* 当前是沿X轴旋转,旋转的基点为span的中心 */
.box span:nth-child(1) {
    transform: rotateX(0deg);
}
.box span:nth-child(2) {
    transform: rotateX(45deg);
}
.box span:nth-child(3) {
    transform: rotateX(90deg);
}
.box span:nth-child(4) {
    transform: rotateX(135deg);
}

/* 旋转的是风车DIV层，本身因为有 rotateY(-45deg)，与原教程不太一样
所有在变化动画的时候需要再加上 rotateY(-45deg) */
@keyframes rotate {
    /* 顺序不对为啥会影响这么大，需要再去好好研究一下了 */
    /* 顺序问题需要再研究一下 */
    0% {
        transform: rotateY(-45deg) rotateX(0deg);
    }
    100% {
        transform: rotateY(-45deg) rotateX(360deg);
    }
}